<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>大数据可视化</title>
<link type="text/css" href="/css/index.css" rel="stylesheet">
<link type="text/css" href="/dashboard/css/public.css" rel="stylesheet">
<link type="text/css" href="/dashboard/css/icon.css" rel="stylesheet">
<link type="text/css" href="/dashboard/css/index.css" rel="stylesheet">
<script type="text/javascript">document.documentElement.style.fontSize =document.documentElement.clientWidth /768*100 + 'px';</script>
<script src="/dashboard/js/echarts.min.js"></script>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/dashboard/js/jquery.numscroll.js" type="text/javascript" ></script>
<script type="text/javascript" src="/layui-post.js"></script>
<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/index.js"></script>
</head>
<style>
select option {background: transparent;color: black;}
.layui-btn {display: inline-block;height: 25px;padding: 0 4px;font-size: 12px;}
</style>
<body>
<div class="bg">
	<div class="title">家庭账单数据可视化</div>
	<div style="position: relative;">
		<a style="z-index:10;float:left;position:fixed;top:5vh;left: 2.5vw;"><input type="text" id="choosedate" style="color:#fff;width:0.34rem;font-size:0.08rem;"></a>
		<a class="layui-btn layui-btn-small" style="z-index:10;float:right;position:fixed;top:5vh;line-height:25px;right: 2.5vw;" onclick="location.reload()" title="刷新"><i class="layui-icon layui-icon-refresh" style="font-size:12px;"></i></a>
	</div>
	<div class="leftMain">
		<div class="leftMain_top">
			<div class="leftMain_topIn"><ul id="paymethod"></ul></div>
		</div>
		<div class="leftMain_middle">
			<div class="leftMain_middle_left">
				<div class="leftMain_middle_leftIn">
					<h3>每日资金统计</h3>
					<div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
			<div class="leftMain_middle_right">
				<div class="leftMain_middle_rightIn">
					<h3><span id="typespan">支出</span>类型排行<span style="float: right"><select style="color:#fff;background:transparent;border-radius:20px;width: 0.3rem;font-size: 0.08rem;" id="typestatus" onchange="typeChange()"><option value="0">支出</option><option value="1">收入</option><option value="2">理财</option></select></span></h3>
					<div class="biaoge biaoge_pai" style="width:100%; height:25vh">
						<div class="biaoge_paiIn"><ul id="billTypeList"></ul></div>
					</div>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
		</div>
		<div class="leftMain_middle">
			<div class="leftMain_middle_left">
				<div class="leftMain_middle_leftIn">
					<h3><span id="licaiyear"></span>年理财报表</h3>
					<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
			<div class="leftMain_middle_right">
				<div class="leftMain_middle_rightIn">
					<h3>金额变动统计</h3>
					<div class="biaoge biaoge_bi" style="width:100%; height:25vh"><ul id="dayUseDetail"></ul></div>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
		</div>
	</div>
	<div class="rightMain">
		<div class="rightMain_top">
			<div class="rightMain_topIn">
				<h3><span id="typespan1">支出</span>类型视图</h3>
				<div class="biaoge" style="width:100%; height:35vh" id="chartmain_bing"></div>
				<div class="biaoge" style="width:100%; height:35vh" id="chartmain_bingNo">
					<div style='text-align:center;line-height:1000%;color:white;'>暂无数据</div>
				</div>
				<span class="border_bg_leftTop"></span>
				<span class="border_bg_rightTop"></span>
				<span class="border_bg_leftBottom"></span>
				<span class="border_bg_rightBottom"></span>
			</div>
		</div>
		<div class="rightMain_bottom">
			<div class="rightMain_bottomIn">
				<h3>账单详情记录</h3>
				<div class="biaoge biaoge_list" style="width:100%; height:46vh">
					<div class="biaoge_listIn">
						<ul class="ul_title">
							<li>账单用户</li><li>账单金额</li><li>收支类型</li><li>账单类型</li><li>账单日期</li>
						</ul>
						<div class="ul_list">
							<div class="ul_listIn" id="billDateDetail"></div>
							<div id="billDateDetailNo">
								<div style='text-align:center;line-height:1000%;color:white;'>暂无数据</div>
							</div>
						</div>
					</div>
				</div>
				<span class="border_bg_leftTop"></span>
				<span class="border_bg_rightTop"></span>
				<span class="border_bg_leftBottom"></span>
				<span class="border_bg_rightBottom"></span>
			</div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<script type="text/javascript">
layui.use(['laydate','layer'], function(){
	layui.laydate.render({
		elem: '#choosedate',
		format: 'yyyy-MM',max:minDate(),
		type: 'month',value: new Date(),
		btns:["now","confirm"],trigger: 'click',
		done: function(value, date){
			showDashByDay(value);
			getAccount(value)
			showDashByType(value)
			getDashByDetail(value)
			getDashList(value)
			getLicaiByYear(value.split("-")[0])
		}
	});
	setTimeout(function(){showData()},300)
	setInterval(function (){showData()},1800000)
})
function showData(){
	showDashByDay($("#choosedate").val());
	getAccount($("#choosedate").val())
	getLicaiByYear($("#choosedate").val().split("-")[0])
	showDashByType($("#choosedate").val());
	getDashByDetail($("#choosedate").val());
	getDashList($("#choosedate").val());
}

function getAccount(billDate) {
	$.post(geturl() + '/dash/selectCountMoney', JSON.stringify({adminId: getQueryString("adminId"),billDate:billDate}), function (res) {
		$("#paymethod").html("")
		for (var i in res.data) {
			let comuntSum = (res.data[i].incomeLimit/1-res.data[i].payLimit/1).toFixed(2);
			$("#paymethod").append(
				'<li onclick="openDate(\''+billDate+'\',\'\',\'\',\''+res.data[i].type+'\')">' +
				'<div class="liIn">' +
				'<h3>' + returnPayMethod(res.data[i]) + '<span class="zi" style="float:right;"><span class="span1">总计</span></span></h3>' +
				'<p class="shu" style="text-align:right;"><span class="shu' + (i / 1 + 1) + '" style="color:'+(comuntSum/1 >= 0 ? "#0efdff":"#f26767")+'">' + comuntSum + '</span><i>元</i></p>' +
				'<div class="zi"><span class="span1">支出：' + res.data[i].payLimit + '</span><span class="span1">收入：' + res.data[i].incomeLimit + '</span></div>' +
				'<span class="border_bg_leftTop"></span>' +
				'<span class="border_bg_rightTop"></span>' +
				'<span class="border_bg_leftBottom"></span>' +
				'<span class="border_bg_rightBottom"></span>' +
				'</div>' +
				'</li>'
			)
			$(".shu" + (i / 1 + 1)).numScroll()
		}
	}).done(function(res){
		if(res.data.length > 0) {
			var liCount = $('#paymethod li').length; // 计算li元素的总数
			$('#paymethod li').each(function(index) { // 遍历每个li元素
				var widthPercentage = (100 / liCount) + '%'; // 计算每个li的宽度百分比
				$(this).css('width', widthPercentage); // 设置宽度
			});
		}
	})
};
function showDashByDay(date){
	let xdata = [],data0=[],data1=[],data2=[];
	$.post(geturl()+'/dash/selectDashByDay', JSON.stringify({adminId:getQueryString("adminId"),billDate:date}), function (res) {
		for(var i in res.data[0]) {
			for (var j in res.data[i]){
				if (i == 0) {
					xdata.push(res.data[i][j].billDate.split('-')[2])
					data0.push(res.data[i][j].billMoney)
				} else if (i == 1) data1.push(res.data[i][j].billMoney)
				// else data2.push(res.data[i][j].billMoney)
			}
		}
	}).done(function(){
		option ={
			title:{text:''},
			tooltip:{trigger:'axis'},
			legend:{textStyle:{color:'#fff',fontSize:12,},right:'10%',data:['支出','收入','理财']},
			grid:{x:40,y:40,x2:20,y2:20,},toolbox:{feature:{}},
			xAxis:{
				type:'category',
				boundaryGap:false,
				axisLabel:{interval:2,textStyle:{color:'#fff',fontSize:12}},
				axisTick:{show:false,},
				axisLine:{show:true,symbol:['none','arrow'],symbolOffset:12,lineStyle:{color:'#fff',}},
				data:xdata
			},
			yAxis:{
				type:'value',
				axisLine:{show:true,symbol:['none','arrow'],symbolOffset:12,lineStyle:{color:'#fff',}},
				axisTick:{show:false},
				axisLabel:{textStyle:{color:'#fff',fontSize:12}}
			},
			series:[
				{name:'支出',type:'line', stack:'总额', data:data0, itemStyle:{normal:{color:"#1ef506",lineStyle:{color:"#1ef506",width:2,}},}},
				{name:'收入',type:'line',stack:'总额',data:data1},
				// {name:'理财',type:'line', stack:'总额', data:data2, itemStyle:{normal:{color:"#0efdff",lineStyle:{color:"#0efdff",width:2,}},}},
			]
		};
		var myChart = echarts.init(document.getElementById('chartmain_zhe'));
		myChart.setOption(option);
		var zr = myChart.getZr();
		zr.off('click');
		zr.on("click",function(params){
			let pointInPixel = [params.offsetX, params.offsetY]
			if (myChart.containPixel('grid', pointInPixel)) {
				let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
				var op = myChart.getOption();
				var day = op.xAxis[0].data[xIndex];//
				openDate($("#choosedate").val()+"-"+day,"",'','')
			}
		})
	})
}

function getDashByDetail(date){
	$.post(geturl()+'/dash/selectDashByDetail', JSON.stringify({adminId:getQueryString("adminId"),billDate:date}), function (res) {
		$("#dayUseDetail").html("")
		for(var i in res.data){
			$("#dayUseDetail").append(
				'<li onclick="openDate(\''+res.data[i].billDate+'\',\''+res.data[i].status+'\',\'\',\'\')">' +
				'<div class="liIn">' +
				'<p class="shu shu1'+(i/1+1)+'">'+res.data[i].billMoney+'</p>' +
				'<p class="zi">'+res.data[i].name+'</p>' +
				'</div>' +
				'</li>'
			)
			$(".shu1"+(i/1+1)).numScroll()
		}
	})
}
//当年理财报表
function getLicaiByYear(year){
	year = checkParamNotNull(year) ? year : new Date().getFullYear();
	$("#licaiyear").html(year)
	$.post(geturl()+'/dash/selectDashByLicai', JSON.stringify({adminId:getQueryString("adminId"),billDate:year}), function (res) {
		var dataAxis =[];var data =[];var yMax =500;var dataShadow =[];for (var i =0;i < data.length;i++) {dataShadow.push(yMax);}
		for(var i in res.data){
			dataAxis.push(res.data[i].month)
			data.push(res.data[i].sum)
		}
		option ={
			title:{text:'',subtext:''},
			grid:{x:40,y:40,x2:20,y2:20,},
			tooltip:{trigger:'axis'},
			xAxis:{
				data:dataAxis,axisLabel:{interval:1,textStyle:{color:'#fff',fontSize:12}},
				axisTick:{show:false,},axisLine:{show:true,symbol:['none','arrow'],symbolOffset:12,lineStyle:{color:'#fff',}},z:10
			},
			yAxis:{
				type:'value',name:'单位：元',axisLine:{show:true,symbol:['none','arrow'],symbolOffset:12,lineStyle:{color:'#fff',}},
				axisTick:{show:false},axisLabel:{textStyle:{color:'#fff',fontSize:12}}
			},
			dataZoom:[{type:'inside'}],
			series:[
				{
					type:'bar',itemStyle:{color:'rgba(0,0,0,0.05)'},barGap:'-100%',barCategoryGap:'40%',
					data:dataShadow,animation:false
				},{
					type:'bar',itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#0efdff'},{offset:0.5,color:'#188df0'},{offset:1,color:'#188df0'}])},
					emphasis:{itemStyle:{color:new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#2378f7'},{offset:0.7,color:'#2378f7'},{offset:1,color:'#0efdff'}])}},
					data:data
				}
			]
		};
		var myChart = echarts.init(document.getElementById('chartmain'));myChart.setOption(option);
		myChart.off('click');
		var zr = myChart.getZr();
		zr.off('click');
		zr.on("click",function(params){
			let pointInPixel = [params.offsetX, params.offsetY]
			if (myChart.containPixel('grid', pointInPixel)) {
				let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0]
				var op = myChart.getOption();
				var day = op.xAxis[0].data[xIndex];//
				openDate(day,2,'','')
			}
		})
	})
}
function getDashList(date){
	$.post(geturl()+'/dash/selectDashList', JSON.stringify({'t2.adminId':getQueryString("adminId"),page:1,limit:50,billDate:date}), function (res) {
		$("#billDateDetail").html("").show();
		$("#billDateDetailNo").hide();
		if(res.data.length === 0) {
			$("#billDateDetailNo").show()
			$("#billDateDetail").hide()
		}
		for(var i in res.data){
			$("#billDateDetail").append(
				'<ul class="ul_con">' +
				'<li>'+res.data[i].trueName+'</li>' +
				'<li>'+res.data[i].billMoney+'</li>' +
				'<li>'+(res.data[i].status == 0?"支出":(res.data[i].status==1?"收入":"理财"))+'</li>' +
				'<li>'+res.data[i].typeName+'</li>' +
				'<li>'+res.data[i].billDate+'</li>' +
				'</ul>'
			)
		}
	})
}
function typeChange(){
	var status = $("#typestatus").val();
	$("#typespan").html(status == 0 ? "支出" : (status == 1 ? "收入" : "理财"))
	$("#typespan1").html(status == 0 ? "支出" : (status == 1 ? "收入" : "理财"))
	showDashByType($("#choosedate").val());
}
function showDashByType(date){
	var typeName=[],valueName=[];
	$.post(geturl()+'/dash/selectDashByType', JSON.stringify({adminId:getQueryString("adminId"),status:$("#typestatus").val(),billDate:date}), function (res) {
		$("#billTypeList").html("")
		$("#chartmain_bing").show();$("#chartmain_bingNo").hide()
		if(res.data.length === 0) {
			$("#billTypeList").html("<li style='text-align:center;line-height:1000%;color:white;'>暂无数据</li>")
			$("#chartmain_bing").hide();
			$("#chartmain_bingNo").show()
		}
		for(var i in res.data){
			typeName.push(res.data[i].name)
			var vn = {value:res.data[i].billMoney,name:res.data[i].name}
			valueName.push(vn);
			$("#billTypeList").append(
				'<li onclick="openDate(\''+$("#choosedate").val()+'\',\''+$("#typestatus").val()+'\',\''+res.data[i].billTypeId+'\',\'\',\''+res.data[i].name+'\')">' +
				'<div class="liIn liIn'+randomNum(1,6)+'">' +
				'<div class="liIn_left"><span class="bot"></span><span class="zi">'+res.data[i].name+'</span></div>' +
				'<div class="liIn_line"><div class="line_lineIn" style="width:'+res.data[i].percentage+';"></div></div>' +
				'<p class="num">'+res.data[i].percentage+'</p>' +
				'</div>' +
				'</li>'
			)
		}
	}).done(function(){
		option ={
			title:{text:'类型',subtext:'',left:'right',textStyle:{color:'#fff',fontSize:12}},
			tooltip:{trigger:'item',formatter:'{b} : {c} ({d}%)'},
			legend:{
				type:'scroll',orient:'vertical',right:10,top:40,bottom:20,left:'right',
				data:typeName,textStyle:{color:'#fff',fontSize:12}
			},
			grid:{x:'-10%',y:40,x2:20,y2:20,},
			color :['#09d0fb','#f88cfb','#95f8fe','#f9f390','#ecfeb7' ],
			series:[{
				type:'pie',radius:'65%',center:['50%','50%'],
				selectedMode:'single',
				data:valueName,
				emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}
			}]
		};
		var myChart = echarts.init(document.getElementById('chartmain_bing'));
		myChart.off('click');
		myChart.setOption(option);
	})
}
function randomNum(minNum,maxNum){
	switch(arguments.length){
		case 1:
			return parseInt(Math.random()*minNum+1,10);
			break;
		case 2:
			return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
			break;
		default:
			return 0;
			break;
	}
}
function openDate(billDate,status,billTypeId,billMethod,billTypeName){
	const billDates = billDate.split("-");
	var billTitle;
	if(billDates.length === 1) billTitle = billDate + "年";
	else if(billDates.length === 2) billTitle = billDate.replace("-","年")+"月";
	else billTitle = billDate.replace("-","年").replace("-","月") + "日";
	if(checkParamNotNull(billTypeName)) billTitle = billTitle + "（"+billTypeName+ "）";
	xadmin.open(billTitle,'/dashboarddate?billDate='+billDate+'&adminId='+getQueryString("adminId")+'&status='+status+'&billTypeId='+billTypeId+'&billMethod='+billMethod,'85','90')
}
</script>
</body>
</html>